<template>
	<!-- 产品分类导航 -->
	<view class="wrap" v-if="content">
		<!-- 导航栏 -->
		<shopro-navbar :isBack="true">
			<view class="u-flex-1 u-flex  u-row-center u-col-center" slot="content">
				<view style="font-weight:bold">{{ title }}</view>
			</view>
		</shopro-navbar>
		<view class="menu-category-box u-m-b-20" v-if="id!=2" v-for="(item_content,index) in content" :key="index">
			<!-- 一级 -->
			<view class="titles">
				{{item_content.name}}
			</view>
			<view v-if="item_content.name != '商帮服务'" class="menu-tab-box u-flex u-flex-wrap">
				<view class="tab-list u-flex-col u-col-center u-row-center" :style="{ width: 100 / 5 + '%' }"
					v-for="(item, indexs) in  item_content.children" :key="indexs" @click="toPaths(item)">
					<view class="item-box">
						<image class="tab-img" :src="item.image"></image>
						<text class="">{{ item.name }}</text>
					</view>
				</view>
			</view>
			<view v-if="item_content.name == '商帮服务'" class="menu-category-box u-m-b-20"
				v-for="(item, indexs) in  item_content.children" :key="indexs">
				<view>
					{{item.name}}
				</view>
				<view class="menu-tab-box u-flex u-flex-wrap">
					<view class="tab-list u-flex-col u-col-center u-row-center" :style="{ width: 100 / 5 + '%' }"
						v-for="(zitem, zindexs) in  item.son_cate" :key="zindexs" @click="toPath(zitem)">
						<view class="item-box">
							<image class="tab-img" :src="zitem.image"></image>
							<text class="">{{ zitem.name }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
    <view class="menu-category-box u-m-b-20" v-if="id==2" v-for="(item_content,index) in content" :key="index">
      <!-- 一级 -->
      <view class="titles">
        {{item_content.name}}
      </view>
      <view>
        <view class="menu-tab-box u-flex u-flex-wrap">
          <view class="tab-list u-flex-col u-col-center u-row-center" :style="{ width: 100 / 5 + '%' }"
                v-for="(zitem, zindexs) in  item_content.son_cate" :key="zitem.id" @click="toPath(zitem)">
            <view class="item-box">
              <image class="tab-img" :src="zitem.image"></image>
              <text class="">{{ zitem.name }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>

		<view class="" v-if="content.length == 0">
			<u-empty marginTop="120"
			        mode="data"
			        icon="http://cdn.uviewui.com/uview/empty/car.png"
			>
			</u-empty>
		</view>

		<!-- 弹窗 -->
		<u-modal v-model="show" title="会员专享" :content="contentText" confirm-text="去充值" confirm-color="#5B6A91"
			:show-cancel-button="true" @confirm="$Router.push('/pages/index/membeRecharge')"></u-modal>
	</view>
</template>

<script>
	/**
	 * shGridSwiper-滑动宫格列表
	 * @property {Array} list - 列表数据
	 * @property {Number|String} oneRowNum - 单行数量
	 */
	export default {
		components: {},
		data() {
			return {
				content: [],
				id: '',
				isVip: 0,
				show: false,
				contentText: '您还不是会员哦',
        title:''
			};
		},
		props: {
			list: {
				type: Array,
				default: () => {
					return [];
				},
				service: []
			},
			oneRowNum: {
				type: [Number, String],
				default: 5
			}
		},
		computed: {
			// newList() {
			//   if (this.list.length) {
			//     let data = this.$tools.splitData(this.list, this.oneRowNum * 2);
			//     return data;
			//   }
			// }
		},
		onLoad(option) {
			this.getVip()
			console.log(option)
			this.id = option.id
			console.log("this.id:", this.id)
			if (this.id) {
				this.getServive()
			} else {
				this.getAllServe()
			}
			if(this.id ==1){
			  this.title='吃喝玩乐'
      } else if(this.id ==2){
        this.title='商帮服务'
      } else if(this.id ==3){
        this.title='商帮教育'
      } else if(this.id ==4){
        this.title='健康保健'
      }else{
			  this.title = '全部服务'
      }
		},
		created() {

		},
		methods: {
			// 获取分类服务
			async getServive() {
				this.$https('category.serveListOnes', {
          type_id: this.id
				}).then(res => {
					if (res.code === 1) {
						this.content = res.data
					}
				})
			},
			getVip() {
				this.$https('user.isVip').then(res => {
					if (res.code === 1) {
						this.isVip = res.data;
						// if (res.data == 0) {
						// 	this.show = true
						// } else {
						// 	this.show = false
						// }
					}
				})
			},
			toPath(item) {
				if(item.is_look == 1){
					if (this.isVip == 0) {
						this.show = true
					} else {
						uni.navigateTo({
							url: '/pages/index/serveDetails?id=' + item.store_cate_id + "&title=" + item.name
						})
					}
				}
				else{
					uni.navigateTo({
						url: '/pages/index/serveDetails?id=' + item.store_cate_id + "&title=" + item.name
					})
				}



			},
      toPaths(item){
        if(this.id == '4'){
        }else{
          uni.navigateTo({
            url: '/pages/index/food?store_cate_id=' + item.store_cate_id + "&title=" + item.name
          })
        }
      },
			// 获取全部服务
			async getAllServe() {
				let that = this;
				that.$https(
						'category.serveAllLists',
					)
					.then(res => {
						if (res.code === 1) {
							this.content = res.data;
						}
					});
			},
			jump(path, query) {
				this.$Router.push({
					path: path,
					query: query
				});
			}
		}
	};
</script>

<style lang="scss">
	page {
		background: #ffffff;
	}

	.wrap {
		// background: #f1f1f1;
		height: 100%;
	}

	// 产品分类
	.menu-category-box {
		position: relative;
		background: #fff;
		border-radius: 20rpx;
		margin: 20rpx;
		padding-top: 20rpx;

		.titles {
			font-size: 32rpx;
			font-weight: 600;
			margin-left: 18rpx;
		}

		.menu-tab-box {
			.tab-list {
				font-size: 26rpx;
				font-weight: 500;
				color: rgba(51, 51, 51, 1);
				margin: 20rpx 0;

				.tab-img {
					width: 72rpx;
					height: 72rpx;
					margin-bottom: 10rpx;
				}
			}
		}

		.menu-category-dots {
			display: flex;
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			bottom: 10rpx;

			.category-dot {
				width: 12rpx;
				height: 12rpx;
				background: #eeeeee;
				border-radius: 50%;
				margin-right: 10rpx;
			}

			.category-dot-active {
				width: 12rpx;
				height: 12rpx;
				background: #e9b461;
				border-radius: 50%;
				margin-right: 10rpx;
			}
		}
	}

	.item-box {
		display: flex;
		flex-direction: column;
    align-items: center;
    justify-content: center;
	}

	.tab-list {
		font-size: 26rpx;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
		margin: 20rpx 0;

		.tab-img {
			width: 72rpx;
			height: 72rpx;
			margin-bottom: 10rpx;
		}
	}
</style>
